<template>
    <div class="main" :style="viewHeight">
        <div class="login_head">
            <i class="login"></i>
            <div class="title" style="color:#5086FF;"><p>{{titles}}</p></div>
        </div>
        <div class="formContent">
            <div class="formBox">
                <div class="formTitle"><p>请登录</p></div>
                <div class="inputBox">
                    <a-input type="text" placeholder="用户名" @change="uName"/>
                    <a-input type="password" placeholder="密码" @change="password"/>
                    <a-button :block="true" size="large" @click="login">登录</a-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Login from "../api/login";
    import {mapActions} from 'vuex'
    import screenfull from 'screenfull';
    import {titles} from "../api/BaseApi";

    export default {
        name: 'Login',
        data() {
            return {
                titles,
                userInfo: {},
                viewHeight: {height: ''},
                fullscreen: false,
            }
        },
        mounted: function () {  // 页面加载时隐藏头部
            this.$store.dispatch('hiddenHead')
            this.getHeight()
        },
        destroyed: function () {  // 页面销毁时隐藏头部
            this.$store.dispatch('showHead')
        },
        methods: {
            ...mapActions(['setUserName']),
            uName(e) {
                this.userInfo.account = e.currentTarget.value;
            },
            password(e) {
                this.userInfo.password = this.$md5(e.currentTarget.value);
            },
            login() {
                let _this = this;
                let user = _this.userInfo;
                if (_this.userInfo.account === '' || _this.userInfo.password === '') {
                    _this.$message.warn('账号或密码不能为空');
                } else {
                    Login.loginup(user).then((data) => {
                        _this.$store.dispatch('setUserName', data.data.account);
                        //大屏显示
                        if(_this.userInfo.account == '高岩社区') {
                          this.$store.dispatch('loadPermission');
                          _this.$router.push('/charge/ParkingRecord')
                        }else{
                          _this.$router.push('/Screen');
                          screenfull.toggle()
                        }
                        if (!screenfull.isEnabled) {
                            this.$message({
                            message: 'you browser can not work',
                            type: 'warning'
                            })
                            return false
                        }
                        //主页统计
                        // _this.$router.push('/main');
                        //只跳停车记录页面
                        // _this.$router.push('/charge/ParkingRecord')
                    }).catch(error => {
                        let data = error.data;
                        let msg = error.msg;
                        return _this.$message.warn(data || msg || '网络错误！');
                    })

                }
            },
            //获取浏览器高度
            getHeight() {
                this.viewHeight.height = window.innerHeight + 'px';
            },
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .login_head {
        min-height: 60px;
        max-height: 140px;
        height: 22vh;
        position: relative;
        background: #fff;
        display: flex;
        align-items: center;
    }

    .login_head .title {
        display: flex;
        justify-items: center;
    }

    .login_head .title p {
        font-size: 20px;
        font-weight: 600
    }

    .login {
        display: inline-block;
        visibility: inherit;
        width: 120px;
        /* background: url(../assets/logo2.png) 0px 43% / 100% no-repeat scroll; */
        height: 100%;
    }

    .main {
        max-width: 1170px;
        margin: 0 auto;
        background: #fff;
        height: 100%
    }

    .formContent {
        height: 55%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .formBox {
        width: 30%;
        height: 300px;
        border: 1px solid #ddd;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
        background: #fff;
    }

    .formBox .formTitle {
        background: #5086FF;
        width: 100%;
        padding: 15px 10px;
    }

    .formBox .formTitle p {
        color: #fff;
        margin: 0;
        padding: 0;
    }

    .inputBox {
        width: 80%;
        margin: 20px auto 0;
    }

    .inputBox input {
        margin: 10px 0;
    }

    .inputBox button {
        background: #ff6c60;
        color: #fff;
        margin-top: 30px;
    }

    .ant-input {
        width: 100%;

    }


</style>
